<template>
	<div class="person">
		姓：<input type="tetx" v-model="x" /><br>
		名：<input type="text" v-model="m" /><br>
		全名：<span>{{ fullName }}</span><br>
		<button  @click="changeFullName()">修改全名</button>
	</div>
</template>
<script lang="ts" setup>
import { get } from 'http';
import { ref, computed } from 'vue';
let x = ref("zhang")
let m = ref("san")
//这么定义的fullName 是一个计算属性，且是只读的
// let fullName = computed(()=>{
// 	return x.value.slice(0,1).toUpperCase() + x.value.slice(1)+m.value;
// })

let fullName = computed({
	get() {
		return x.value.slice(0, 1).toUpperCase() + x.value.slice(1) + m.value;
	},
	set(val) {
		const[str1, str2] = val.split('-')
		x.value = str1
		m.value = str2
	}
})

function changeFullName(){
	//此处调用触发了computed的set方法。
	fullName.value = 'li-sa'
}

</script>
<style>
.person {
	padding: 10px;
}
</style>
